<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <title></title>
  <style type="text/css">
    *{ margin: 0; padding: 0; box-sizing: border-box;}
    body{ font-family: "Microsoft Yahei", PingFangSC-Regular; background-color: #EAF0F2; }
    .main{ position: absolute; top: 0; left: 0; right: 0; bottom: 52px; overflow-y: scroll; -webkit-overflow-scrolling: touch; }
    .wrapper{ padding: 20px 16px 16px; background-color: #fff; }
    .g-title{ font-size: 20px; font-weight: 600; line-height: 28px; color: #202629; }
    .g-info{ display: flex; justify-content: space-between; align-items: center; margin-top: 12px; color: #929CA0; font-size: 12px; }
    .g-info .m-from{ flex: 1 1 auto; margin-left: 10px; }
    .g-logoimg:not(:empty){ margin: 16px 0; }
    .g-logoimg img{ width: 100%; }
    .g-content{ margin-top: 20px; color: #0E0000; text-align: justify; }
    .g-content p{ margin-top: 24px; font-size: 16px; line-height: 24px; }
    .g-content p:first-child{ margin-top: 0; }
    .g-content img{ width: 100%; margin: 16px 0; }
    /*.g-comment{ margin-bottom: 50px; }*/
    .mb-h{ bottom: 95px; }
    .m-comment{ margin: 16px; font-size: 12px; color: #929CA0; }
    .m-comment-wrapper{ padding: 12px 16px; width: 100%; background-color: #fff; }
    .m-comment-header{ display: flex; justify-content: space-between; align-items: center; }
    .m-comment-header .u-head{ width: 32px; height: 32px; border-radius: 50%; background-color: #ccc; overflow: hidden; }
    .m-comment-header .u-name{ flex: 0 1 auto; margin: 0 5px 0 8px; color: #202629; font-size: 16px; font-weight: 600; }
    .m-comment-header .u-date{ flex: 1 1 auto; align-self: flex-end; margin-bottom: 5px; color: #929CA0; font-size: 12px; }
    .m-comment-header .u-likes{ font-size: 12px; color: #929CA0; }
    .m-comment-header .u-likes.active{ color: #6492F7; }
    .m-comment-header .u-likes .u-likenum{ display: inline-block; margin-left: 8px; vertical-align: top; }
    .m-comment-body{ margin-top: 10px; font-size: 14px; color: #202629; text-align: justify; line-height: 24px; }
    .g-criticize{ display: flex; justify-content: space-between; align-items: center; position: absolute; left: 0; bottom: 0; width: 100%; overflow: hidden; padding: 10px 16px; background-color: #fff; box-shadow: 0px -1px 2px -1px #CFD5D7; }
    .g-criticize .m-criticize-input{ flex: 1 1 auto; border: 1px solid #CFD5D7; padding: 8px 0 6px 16px; border-radius: 4px; background-color: #fafafa; font-size: 12px; line-height: 16px; font-family: 'Microsoft Yahei' }
    .g-criticize .m-criticize-input.focus{ font-size: 14px; line-height: 20px; border: none; background-color: #fff; }
    .g-criticize .m-criticize-input:focus, .g-criticize .m-criticize-btn:focus{ outline: none; }
    .g-criticize .m-criticize-btn{ margin-left: 20px; min-height: 30px; max-height: 150px; border: none; color: #6492F7; font-size: 14px; background: transparent; transition: all .4s ease-in; opacity: 1 }
    .icon-like{ display: inline-block; width: 16px; height: 16px; background: url() no-repeat; background-size: contain}
    .active .icon-like{ background: url() no-repeat; background-size: contain; }
  </style>
  <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
<div class="main j-main">
  <div class="wrapper">
    <div class="g-title" class="j-title">原研哉对于设计的思考，似乎超越了我的理解能力。</div>

    <div class="g-info">
      <div class="m-date">2016年4月25日</div>
      <div class="m-from">环球时报-环球网</div>
      <div class="m-commentnum">评论: <span id="j-comment">599</span></div>
    </div>

    <div class="g-logoimg"><!-- 这里面放入 img 标签插入图片 --></div>

    <div class="g-content">
      <p>1、根本就不该禁烟。此外，烟草专卖制度应该取消，各类税收应该废除。</p>
      <p>2、这么说，现在没用，但是，赞同的人多到一程度，就有用了。</p>
      <p>3、根本就不该禁烟。此外，烟草专卖制度应该取消，各类税收应该废除。</p>
      <p>4、这么说，现在没用，但是，赞同的人多到一程度，就有用了。</p>
      <p>5、根本就不该禁烟。此外，烟草专卖制度应该取消，各类税收应该废除。</p>
      <p>6、这么说，现在没用，但是，赞同的人多到一程度，就有用了。</p>
    </div>

  </div>

  <div class="g-comment">
    <div class="m-comment">用户评论</div>

    <div class="m-comment-wrapper">
      <div class="m-comment-header">
        <img class="u-head" src="" alt="" />
        <span class="u-name">王尔德</span>
        <span class="u-date">2016年12月26日</span>
        <div class="u-likes j-likes"><i class="iconfont icon-like"></i><span class="u-likenum j-likenum">242</span></div>
      </div>
      <div class="m-comment-body">
        <p>谢邀。我想知道你是指“第二外语”还是“第二专业”。大三英语专业会开设二外课程，比如我学习的日语。我的感觉是，我的感觉是日语的学鸡...</p>
      </div>
    </div>
    <div class="m-comment-wrapper">
      <div class="m-comment-header">
        <img class="u-head" src="" alt="" />
        <span class="u-name">王尔德</span>
        <span class="u-date">2016年12月26日</span>
        <div class="u-likes j-likes active"><i class="iconfont icon-like"></i><span class="u-likenum j-likenum">242</span></div>
      </div>
      <div class="m-comment-body">
        <p>谢邀。我想知道你是指“第二外语”还是“第二专业”。大三英语专业会开设二外课程，比如我学习的日语。我的感觉是，我的感觉是日语的学鸡...</p>
      </div>
    </div>
    <div class="m-comment-wrapper">
      <div class="m-comment-header">
        <img class="u-head" src="" alt="" />
        <span class="u-name">王尔德</span>
        <span class="u-date">2016年12月26日</span>
        <div class="u-likes j-likes"><i class="iconfont icon-like"></i><span class="u-likenum j-likenum">242</span></div>
      </div>
      <div class="m-comment-body">
        <p>谢邀。我想知道你是指“第二外语”还是“第二专业”。大三英语专业会开设二外课程，比如我学习的日语。我的感觉是，我的感觉是日语的学鸡...</p>
      </div>
    </div>

  </div>
</div>

  <div class="g-criticize j-criticize">
    <!-- <input type="text" id="criticize" class="m-criticize-input" placeholder="发表评论..." name=""> -->
    <textarea id="criticize" class="m-criticize-input" rows="1" placeholder="发表评论..."></textarea>
    <input type="button" id="submitBtn" class="m-criticize-btn" value="发布" name="">
  </div>

  <script type="text/javascript">
    if (/Android/gi.test(navigator.userAgent)) {
      window.addEventListener('resize', function () {
          if (document.activeElement.tagName == 'INPUT' || document.activeElement.tagName == 'TEXTAREA') {
              window.setTimeout(function () {
                  document.activeElement.scrollIntoViewIfNeeded();
              }, 0);
          }
      })
    }

    $(function(){

      var $jlikes = $('.j-likes')
      $jlikes.on('click', function () {
        $(this).toggleClass('active')
        var $jlikenum = $(this).find('.j-likenum')
        var num = parseInt($jlikenum.html(), 10)
        num = $(this).hasClass('active') ? num + 1 : num - 1
        $jlikenum.html(num)
        // 此处可以发送ajax请求与后台交互
      })

      var $jmain = $('.j-main')
      var $jcriticize = $('.j-criticize')
      var $criticize = $('#criticize')
      var $submitBtn = $('#submitBtn')
      $criticize.on('focus', function () {
        $(this).attr('rows', 3)
        $(this).addClass('focus')
        $jmain.addClass('mb-h')
        $submitBtn.hide()
      })
      $criticize.on('blur', function () {
        $(this).attr('rows', 1)
        $(this).removeClass('focus')
        $jmain.removeClass('mb-h')
        $submitBtn.show()
      })

      $submitBtn.on('click', function () {
        var comment = $criticize.val()
        console.log(comment)
        if (!comment) {
          window.alert('请输入评论信息')
          return
        }
        // $.ajax({
        //   url: '',
        //   method: 'post',
        //   data: {
        //     id: '',
        //     comment: comment
        //   }
        //   dataType: 'json',
        //   success: function (data) {
        //     console.log(data)
        //     window.alert('评论成功！')
        //     $criticize.val('')
        //   },
        //   error: function (xhr, err) {
        //     console.log(err)
        //     window.alert('评论失败！')
        //   }
        // })
      })
      
    })
  </script>
</body>
</html>